<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 浮动运用场景：文字环绕、横向排列（一般行块盒排列有很多问题 所以用浮动兼容性好）
    浮动属性：即css中float
        1、float:left,左浮动，即靠上靠左
        2、float：right，右浮动，即靠上靠右
    浮动后 均为块盒，即 display：block
    且默认float为none值
    浮动元素的包含块和常规流一样都为父元素的内容块
    浮动规则：
        1、当width为auto时 宽度不和常规流一样会吸收剩余空间 而是会根据内容定宽
        2、当height为auto时，和常规流一样 会根据内容定宽
        3、margin：auto时 都为 0 
        4、外边距 边框 padding 等百分比 和常规流一样都为包容块的宽度
        5、外边距合并不会发生
    浮动位置规则：
        1、left：左上依次，空间不够换行；right：右上依次，空间不够换行
        2、浮动盒子在包含块中遇到常规盒子 会避开（可以想象成浮动盒子是在天上的，当他在常规盒子后面看到常规盒子 他会避开）
        3、常规盒子看到浮动盒子不会避开会无视（想象成浮动盒子在天上，常规盒子在地上看不到浮动盒子 就不会避开）
        4、行盒在排列时，会避开浮动盒子（这里说的一般是文字环绕 因为文字虽然在p中，p为块盒但是浏览器在文字没有在行盒时，会自动生成一个行盒包裹文字，行盒为匿名行盒-->
        <!-- 行盒可以看作是内容（文字...) -->
        <!-- 高度坍塌 -->
        <!-- 浮动盒子脱离了常规流盒子 所以常规流盒子自动高度auto在计算高度的时候不会考虑浮动盒子 -->
        <!-- 解决高度坍塌的方法
        清除浮动、涉及到css属性：clear
        默认值为none
        属性值：left、right、both
        left：清除左浮动，该元素出现在所有左浮动的下方；right：清除右浮动。该元素出现在所有右浮动的下方；both：清除左右浮动，该元素出现在所有浮动的下方。 
        具体方法在浮动下方设置一个div 类样式为clearfix 属性值为clear：both 或者使用：after伪元素选择器来解决问题（content属性一定要有！）-->


        <!-- 补充扩展 浮动盒子的浮动细节：
        左浮动，即靠上靠左；右浮动，即靠上靠右；浮动盒子不得超过上一个浮动盒子的顶边（即在浮动盒子空间不足时候，向下移动后 要注意顶边位置）；浮动盒子在空间不足时 会向下后向左或像右浮动（看左浮动还是右浮动） -->

</body>
</html>